<template>
  <div class="app-container2">

    <div class="bottom-list">
      <div style=" background:#f9f9f9;display: flex;justify-content: center;">
        <div class="t-b-1" style="width: 30%">监测条件</div>
        <div class="t-b-1" style="width: 15%">数据项</div>
        <div class="t-b-1" style="width: 10%">监测状态</div>
        <div class="t-b-1" style="width: 10%">监测阈值</div>
        <div class="t-b-1" style="width: 20%">触发条件</div>
        <div class="t-b-1" style="width: 15%">预警内容</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;border: 1px solid #f0f0f0;">
        <div style="margin: 10px 0">PGT-A upgarde</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div class="box">
            <div class="title">建库方法</div>
            <div class="check-box">
              <div>ChromInst一步成库</div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">WGA浓度（ng/ul）</div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value1"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(1, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%">
          <div class="input-box">
            <div>文库浓度≥ 2ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 20%">
          <div class="select-box">浓度< 2ng/μL</div>
        </div>
        <div class="t-b-2" style="width: 15%">当前值：标红</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div style="display: flex; flex-flow: column">
            <div class="box">
              <div class="title">扩增方法</div>
              <div class="check-box">
                <div>两步扩增</div>
              </div>
            </div>
            <div class="box">
              <div class="title">建库方法</div>
              <div class="check-box">
                <div>酶切打断</div>
              </div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>WGA浓度（ng/ul）</div>
            <div>文库浓度（ng/ul）</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value2"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(2, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%">
          <div class="input-box">
            <div>WGA浓度≥ 5ng/μL</div>
            <div>文库浓度≥ 10ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 20%">
          <div class="select-box">
            <div class="select-box">WGA浓度< 5ng/μL</div>
            <div class="select-box">文库浓度< 10ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">当前值：标红</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div class="box">
            <div class="check-box">
              <div>PASS</div>
              <div>INFO</div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">data_QC_conclusion</div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value3"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(3, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%"></div>
        <div class="t-b-2" style="width: 20%"></div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>PASS标绿</div>
            <div>INFO标红</div>
          </div>
        </div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;border: 1px solid #f0f0f0;">
        <div style="margin: 10px 0">PGTAH</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div class="box">
            <div class="title">建库方法</div>
            <div class="check-box">
              <div>ChromInst一步成库</div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">WGA浓度（ng/ul）</div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value4"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(4, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%">
          <div class="input-box">
            <div>文库浓度≥ 2ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 20%">
          <div class="select-box">浓度< 2ng/μL</div>
        </div>
        <div class="t-b-2" style="width: 15%">当前值：标红</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div style="display: flex; flex-flow: column">
            <div class="box">
              <div class="title">扩增方法</div>
              <div class="check-box">
                <div>两步扩增</div>
              </div>
            </div>
            <div class="box">
              <div class="title">建库方法</div>
              <div class="check-box">
                <div>酶切打断</div>
              </div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>WGA浓度（ng/ul）</div>
            <div>文库浓度（ng/ul）</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value5"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(5, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%">
          <div class="input-box">
            <div>WGA浓度≥ 5ng/μL</div>
            <div>文库浓度≥ 10ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 20%">
          <div class="select-box">
            <div class="select-box">WGA浓度< 5ng/μL</div>
            <div class="select-box">文库浓度< 10ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">当前值：标红</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div class="box">
            <div class="check-box">
              <div>PASS</div>
              <div>INFO</div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">data_QC_conclusion</div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value6"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(6, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%"></div>
        <div class="t-b-2" style="width: 20%"></div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>PASS标绿</div>
            <div>INFO标红</div>
          </div>
        </div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;border: 1px solid #f0f0f0;">
        <div style="margin: 10px 0">PGT-SR</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div class="box">
            <div class="title">建库方法</div>
            <div class="check-box">
              <div>ChromInst一步成库</div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">WGA浓度（ng/ul）</div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value7"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(7, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%">
          <div class="input-box">
            <div>文库浓度≥ 2ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 20%">
          <div class="select-box">浓度< 2ng/μL</div>
        </div>
        <div class="t-b-2" style="width: 15%">当前值：标红</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div style="display: flex; flex-flow: column">
            <div class="box">
              <div class="title">扩增方法</div>
              <div class="check-box">
                <div>两步扩增</div>
              </div>
            </div>
            <div class="box">
              <div class="title">建库方法</div>
              <div class="check-box">
                <div>酶切打断</div>
              </div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>WGA浓度（ng/ul）</div>
            <div>文库浓度（ng/ul）</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value8"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(8, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%">
          <div class="input-box">
            <div>WGA浓度≥ 5ng/μL</div>
            <div>文库浓度≥ 10ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 20%">
          <div class="select-box">
            <div class="select-box">WGA浓度< 5ng/μL</div>
            <div class="select-box">文库浓度< 10ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">当前值：标红</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div class="box">
            <div class="check-box">
              <div>PASS</div>
              <div>INFO</div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">data_QC_conclusion</div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value9"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(9, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%"></div>
        <div class="t-b-2" style="width: 20%"></div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>PASS标绿</div>
            <div>INFO标红</div>
          </div>
        </div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;border: 1px solid #f0f0f0;">
        <div style="margin: 10px 0">MaReCs</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div class="box">
            <div class="title">建库方法</div>
            <div class="check-box">
              <div>ChromInst一步成库</div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">WGA浓度（ng/ul）</div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value10"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(10, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%">
          <div class="input-box">
            <div>文库浓度≥ 2ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 20%">
          <div class="select-box">浓度< 2ng/μL</div>
        </div>
        <div class="t-b-2" style="width: 15%">当前值：标红</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div style="display: flex; flex-flow: column">
            <div class="box">
              <div class="title">扩增方法</div>
              <div class="check-box">
                <div>两步扩增</div>
              </div>
            </div>
            <div class="box">
              <div class="title">建库方法</div>
              <div class="check-box">
                <div>酶切打断</div>
              </div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>WGA浓度（ng/ul）</div>
            <div>文库浓度（ng/ul）</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value11"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(11, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%">
          <div class="input-box">
            <div>WGA浓度≥ 5ng/μL</div>
            <div>文库浓度≥ 10ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 20%">
          <div class="select-box">
            <div class="select-box">WGA浓度< 5ng/μL</div>
            <div class="select-box">文库浓度< 10ng/μL</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">当前值：标红</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div class="box">
            <div class="check-box">
              <div>PASS</div>
              <div>INFO</div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">data_QC_conclusion</div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value12"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(12, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%"></div>
        <div class="t-b-2" style="width: 20%"></div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>PASS标绿</div>
            <div>INFO标红</div>
          </div>
        </div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;border: 1px solid #f0f0f0;">
        <div style="margin: 10px 0">PGT-M</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div class="box">
            <div class="title">建库方法</div>
            <div class="check-box">
              <div>ChromInst一步成库</div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>WGA浓度（ng/ul）</div>
            <div>二阶段家系类型</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value13"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(13, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%">
          <div class="input-box">
            <div>文库浓度≥ 2ng/μL</div>
            <div>二阶段家系类型应为非遗传型家系</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 20%">
          <div class="select-box">
            <div>文库浓度< 2ng/μL</div>
            <div>二阶段家系类型为其他</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">当前值：标红</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div style="display: flex; flex-flow: column">
            <div class="box">
              <div class="title">扩增方法</div>
              <div class="check-box">
                <div>两步扩增</div>
              </div>
            </div>
            <div class="box">
              <div class="title">建库方法</div>
              <div class="check-box">
                <div>酶切打断</div>
              </div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>WGA浓度（ng/ul）</div>
            <div>文库浓度（ng/ul）</div>
            <div>二阶段家系类型</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value14"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(14, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%">
          <div class="input-box">
            <div>WGA浓度≥ 5ng/μL</div>
            <div>文库浓度≥ 10ng/μL</div>
            <div>二阶段家系类型应为非遗传型家系</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 20%">
          <div class="select-box">
            <div class="select-box">WGA浓度< 5ng/μL</div>
            <div class="select-box">文库浓度< 10ng/μL</div>
            <div>二阶段家系类型为其他</div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">当前值：标红</div>
      </div>
      <div style="background:#fff;display: flex;justify-content: center;">
        <div class="t-b-2" style="width: 30%">
          <div class="box">
            <div class="check-box">
              <div>PASS</div>
              <div>INFO</div>
            </div>
          </div>
        </div>
        <div class="t-b-2" style="width: 15%">data_QC_conclusion</div>
        <div class="t-b-2" style="width: 10%">
          <el-switch
            v-model="value15"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(15, $event)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </div>
        <div class="t-b-2" style="width: 10%"></div>
        <div class="t-b-2" style="width: 20%"></div>
        <div class="t-b-2" style="width: 15%">
          <div>
            <div>PASS标绿</div>
            <div>INFO标红</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { thresholdValueList, thresholdValueUpdate } from '@/api/system/warning.js'
export default {
  name: 'Index',
  data() {
    return {
      options: [{
        value: '=',
        label: '等于'
      }, {
        value: '>',
        label: '大于'
      }, {
        value: '<',
        label: '小于'
      }, {
        value: '>=',
        label: '大于等于'
      }, {
        value: '<=',
        label: '小于等于'
      }],
      value1: false,
      value2: false,
      value3: false,
      value4: false,
      value5: false,
      value6: false,
      value7: false,
      value8: false,
      value9: false,
      value10: false,
      value11: false,
      value12: false,
      value13: false,
      value14: false,
      value15: false
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      thresholdValueList().then(res => {
        if (res.rows) {
          this.value1 = res.rows[0].status
          this.value2 = res.rows[1].status
          this.value3 = res.rows[2].status
          this.value4 = res.rows[3].status
          this.value5 = res.rows[4].status
          this.value6 = res.rows[5].status
          this.value7 = res.rows[6].status
          this.value8 = res.rows[7].status
          this.value9 = res.rows[8].status
          this.value10 = res.rows[9].status
          this.value11 = res.rows[10].status
          this.value12 = res.rows[11].status
          this.value13 = res.rows[12].status
          this.value14 = res.rows[13].status
          this.value15 = res.rows[14].status
        }
      })
    },
    changeStatus(id, val) {
      const params = {
        id: id,
        status: val
      }
      thresholdValueUpdate(params).then(res => {
        this.initData()
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container2 {
  // width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  height: calc(100% - 70px);
  display: flex;
  .bottom-list {
    height: 100%;
    width: 100%;
    overflow: auto;
    .t-b-1{
      border: 1px solid #f0f0f0;
      width: 20%;
      height: auto;
      font-size: 14px;
      text-align: center;
      line-height: 50px;
    }
    .t-b-2{
      border: 1px solid #f0f0f0;
      width: 20%;
      height: auto;
      text-align: center;
      line-height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      .box {
        display: flex;
        align-items: center;
        .title {
          font-size: 14px;
          width: 200px;
        }
      }
      .input-box {
        display: flex;
        flex-flow: column;
        padding: 0 5px;
      }
    }
  }
}
</style>
